<template>
    <div>
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <div class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>小区管理</el-breadcrumb-item>
                    <el-breadcrumb-item>房产列表</el-breadcrumb-item>
                </div>
            </el-breadcrumb>
        </div>
        <div class="selectdiv">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="formInline.user" placeholder="输入单元号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.user" placeholder="输入房屋编号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>

                    <el-button type="primary" @click="dialogCreate = true">新建</el-button>

                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-card>
            <el-table
                    :data="houseList"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="houseId"
                        label="房屋id"
                        min-width="10%">
                </el-table-column>
                <el-table-column
                        prop="houseUnit"
                        label="单元号"
                        min-width="10%">
                </el-table-column>
                <el-table-column
                        prop="houseName"
                        label="房屋编号"
                        min-width="15%">
                </el-table-column>
                <el-table-column
                        prop="userId"
                        label="业主编号"
                        min-width="15%">
                </el-table-column>
                <el-table-column
                        prop="startTime"
                        label="开始使用时间"
                        min-width="25%">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        min-width="10%">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="dialogEdit = true">修改</el-button>
                        <el-button @click="deleteHouse(scope.row.houseId)" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
                <el-pagination
                        style="margin-top: 15px; display: flex;justify-content:flex-end;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.pagenum"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="queryInfo.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-card>
        </div>
        <!--新建房屋弹窗-->
        <el-dialog
                title="新建房屋"
                :visible.sync="dialogCreate"
                width="50%"
                @close="addFromClose">
            <el-form :inline="true" :model="houseFrom" ref="addHouseRef" :label-position="labelPosition" label-width="100px">
                    <el-form-item label="房屋编号" prop="houseName">
                        <el-input v-model="houseFrom.houseName" placeholder="输入房屋编号" style="width: 168px;"></el-input>
                    </el-form-item>
                <div> <el-form-item label="单元号" prop="houseUnit">
                        <el-input v-model="houseFrom.houseUnit" placeholder="输入单元号" style="width: 168px;"></el-input>
                    </el-form-item>
                </div>
                <div>
                <el-form-item label="业主编号" prop="userId">
                    <el-input v-model="houseFrom.userId" placeholder="输入业主编号" style="width: 200px;"></el-input>
                </el-form-item>
                </div>
                <el-form-item label="开始使用日期" prop="startTime">
                    <el-date-picker
                            v-model="houseFrom.startTime"
                            type="date"
                            placeholder="选择日期"
                            style="width: 200px;">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogCreate = false">取 消</el-button>
    <el-button type="primary" @click="addHouse">提 交</el-button>
  </span>
        </el-dialog>
        <!--修改房屋信息-->
        <el-dialog
                title="修改房产所有"
                :visible.sync="dialogEdit"
                width="50%"
                :before-close="handleClose">
            <div >
                <el-form :inline="true" :model="house_alert" :label-position="labelPosition" label-width="100px">
                <el-form-item label="业主姓名">
                    <el-input v-model="house_alert.user_name" placeholder="输入新的业主姓名" style="width: 200px;"></el-input>
                </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogEdit = false">取 消</el-button>
    <el-button type="primary" @click="dialogEdit = false">提 交</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        created(){
            this.getHouseList()
        },
        methods: {
            handleSizeChange (newSize) {
                // console.log(newSize)
                this.queryInfo.pagesize = newSize
                this.getHouseList()
            },
            handleCurrentChange (newSize) {
                // console.log(newSize)
                this.queryInfo.pagenum = newSize
                this.getHouseList()
            },
            //获取房屋列表
            async getHouseList(){
                const {data : resp}=await this.$http.get('/propertyInformation/findAll/'+ this.queryInfo.pagenum + '/' + this.queryInfo.pagesize)
                if(resp.code !== 200) {return this.$message.error('获取房屋列表失败') }
                /*this.$message.success('')*/
                this.houseList = resp.data.records
                this.total = resp.data.total
            },
            //添加房屋对话框关闭后清除数据
            addFromClose(){
               this.$refs.addHouseRef.resetFields()
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            onSubmit() {
                console.log('submit!');
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //添加房屋
            addHouse(){
                this.$refs.addHouseRef.validate(async valid => {
                    const {data: resp} = await this.$http.post('/propertyInformation/addPropertyInfo', this.houseFrom)
                    if (resp.code !== 200) {
                        return this.$message.error('添加房屋失败！')
                    }
                    this.$message.success('添加房屋成功！')
                    this.dialogCreate = false
                    this.getHouseList()
                })
            },
            //根据userId删除用户
            async deleteHouse(houseId){
                //弹框询问是否删除数据
                const confirmResult = await this.$confirm('此操作将永久删除该房屋, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).catch( err => err)
                console.log(confirmResult)
                if(confirmResult !== 'confirm') {return this.$message.info('取消删除房屋')}
                const {data : resp} = await this.$http.delete('/propertyInformation/deletePropertyInfoById/'+houseId)
                if(resp.code !== 200) {return this.$message.error('删除房屋失败') }
                this.$message.success('删除房屋成功')
                this.getHouseList()
            },
        },
        data() {
            return {
                queryInfo: {
                    // 当前页数
                    pagenum: 1,
                    // 每页显示多少数据
                    pagesize: 10
                },
                houseList: [],
                houseFrom:{
                    houseName:'',
                    houseUnit:'',
                    userId:'',
                    startTime:'',
                },
                labelPosition:'right',
                house_alert:{
                    user_name:'',
                },
                formInline: {
                    user: '',
                    region: ''
                },
                dialogCreate: false,
                dialogEdit: false,
            }


        },
    }
</script>

<style scoped>
    .textsize{
        height: 50%;
        width: 50%;
    }
    .selectdiv {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .pagination {
        position: absolute;
        right: 100px;
        margin-top: 10px;
    }

    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }
    .createann{
        position: absolute;
        left: 700px;
        top:0px;

    }
</style>

